<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>车型管理</title>
	<link rel="stylesheet" href="${cxt }/css/iconfont.css" />
	<link rel="stylesheet" href="${cxt }/css/llp_basepage.css" />
	<script type="text/javascript" src="${cxt }/js/iconfont.js" ></script>
	<script type="text/javascript" src="${cxt }/js/jquery-3.2.1.js" ></script>
	<script type="text/javascript">
		$(function(){
			
			$("#query").click(function(){
				$.ajax({
					url:"${cxt}/backstage/modelmanageservlet1",
					success:function(data){
						$("#table").empty();
						for(var i=0;i<data.length;i++){
						$("#table").append(
							'	<tr>'+
							'		<td>'+data[i].car_model_id+'</td>'+
							'		<td>'+data[i].car_model_name+'</td>'+
							'		<td>'+data[i].car_model_type+'</td>'+
							'		<td>'+data[i].car_model_year+'</td>'+
							'		<td>'+data[i].car_model_seating+'</td>'+
							'		<td>'+data[i].car_model_door_number+'</td>'+
							'		<td>'+data[i].car_model_fuel_type+'</td>'+
							'		<td>'+data[i].car_model_gps+'</td>'+
							'		<td>'+data[i].car_model_seat+'</td>'+
							'		<td>'+data[i].car_model_image+'</td>'+
							'		<td>'+data[i].car_model_rent_cash+'</td>'+
							'		<td>'+data[i].car_model_insurance+'</td>'+
							'		<td>'+data[i].company_discount+'</td>'+
							'		<td>'+data[i].car_model_pledge+'</td>'+
							'		<td>'+
							'			<input class="update" type="button" value="修 改" />'+
							'			<input class="delete" type="button" value="删 除"/>'+
							'		</td>'+
							'	</tr>'
						)
						}
					},
					dataType:"json",
					data: {modelid:$("#modelid").val()}
				})
			})
			
			$("#insert").click(function(){
				var $div=$("<div class='quxiao'></div>").width($(window).width()).height($(window).height()).css({position:'absolute',backgroundColor:'rgba(0,0,0,0.6)',top:'0px',left:'0px',zIndex:'4'});
				$("body").append($div);
				$("#tianjia").css("display","block");
			})
			
			$("#queding2").click(function(){
				$("#tianjia").css("display","none");
				$("#tjcg").css("display","block");
			})
			
			$("#quxiao2").click(function(){
				$(".quxiao").css("display","none");
				$("#tianjia").css("display","none");
			})
			
			$("#queren2").click(function(){
				var id1 = $("#id1").val();
				$("input[name=id1]").val(id1);
				var name1 = $("#name1").val();
				$("input[name=name1]").val(name1);
				var type1 = $("#type1").val();
				$("input[name=type1]").val(type1);
				var year1 = $("#year1").val();
				$("input[name=year1]").val(year1);
				var seating1 = $("#seating1").val();
				$("input[name=seating1]").val(seating1);
				var number1 = $("#number1").val();
				$("input[name=number1]").val(number1);
				var fuel1 = $("#fuel1").val();
				$("input[name=fuel1]").val(fuel1);
				var gps1 = $("#gps1").val();
				$("input[name=gps1]").val(gps1);
				var seat1 = $("#seat1").val();
				$("input[name=seat1]").val(seat1);
				var image1 = $("#image1").val();
				$("input[name=year1]").val(year1);
				var cash1 = $("#cash1").val();
				$("input[name=cash1]").val(cash1);
				var insurance1 = $("#insurance1").val();
				$("input[name=insurance1]").val(insurance1);
				var discount1 = $("#discount1").val();
				$("input[name=discount1]").val(discount1);
				var pledge1 = $("#pledge1").val();
				$("input[name=pledge1]").val(pledge1);
				$("#tjxx").submit();
				$(".quxiao").css("display","none");
				$("#tjcg").css("display","none");
			})
			
			$(document).on("click",".update",function(){
				var modelid=$(this).parents("tr").find("td:eq(0)").text();
				$.ajax({
					url:"${cxt}/backstage/modelmanageservlet3",
					dataType:"json",
					data: {modelid:modelid},
					success:function(data){
						$("#id").val(data.car_model_id);
						$("#name").val(data.car_model_name);
						$("#type").val(data.car_model_type);
						$("#year").val(data.car_model_year);
						$("#seating").val(data.car_model_seating);
						$("#number").val(data.car_model_door_number);
						$("#fuel").val(data.car_model_fuel_type);
						$("#gps").val(data.car_model_gps);
						$("#seat").val(data.car_model_seat);
						$("#image").val(data.car_model_image);
						$("#cash").val(data.car_model_rent_cash);
						$("#insurance").val(data.car_model_insurance);
						$("#discount").val(data.company_discount);
						$("#pledge").val(data.car_model_pledge);
					},
				})
				var $div=$("<div class='quxiao'></div>").width($(window).width()).height($(window).height()).css({position:'absolute',backgroundColor:'rgba(0,0,0,0.6)',top:'0px',left:'0px',zIndex:'4'});
				$("body").append($div);
				$("#chakan").css("display","block");
			})
			
			$("#queding").click(function(){
				$("#chakan").css("display","none");
				$("#xgcg").css("display","block");
			})
			
			$("#quxiao").click(function(){
				$(".quxiao").css("display","none");
				$("#chakan").css("display","none");
			})
			
			$("#queren").click(function(){
				var id = $("#id").val();
				$("input[name=id]").val(id);
				var name = $("#name").val();
				$("input[name=name]").val(name);
				var type = $("#type").val();
				$("input[name=type]").val(type);
				var year = $("#year").val();
				$("input[name=year]").val(year);
				var seating = $("#seating").val();
				$("input[name=seating]").val(seating);
				var number = $("#number").val();
				$("input[name=number]").val(number);
				var fuel = $("#fuel").val();
				$("input[name=fuel]").val(fuel);
				var gps = $("#gps").val();
				$("input[name=gps]").val(gps);
				var seat = $("#seat").val();
				$("input[name=seat]").val(seat);
				var image = $("#image").val();
				$("input[name=year]").val(year);
				var cash = $("#cash").val();
				$("input[name=cash]").val(cash);
				var insurance = $("#insurance").val();
				$("input[name=insurance]").val(insurance);
				var discount = $("#discount").val();
				$("input[name=discount]").val(discount);
				var pledge = $("#pledge").val();
				$("input[name=pledge]").val(pledge);
				$("#xgxx").submit();
				$(".quxiao").css("display","none");
				$("#xgcg").css("display","none");
			})
			
			$(document).on("click",".delete",function(){
				var modelid=$(this).parents("tr").find("td:eq(0)").text();
 				$.ajax({
					data:{"modelid":modelid},
					url:"${cxt}/backstage/modelmanageservlet2",
				}) 
				var $div=$("<div class='quxiao'></div>").width($(window).width()).height($(window).height()).css({position:'absolute',backgroundColor:'rgba(0,0,0,0.6)',top:'0px',left:'0px',zIndex:'4'});
				$("body").append($div);
				$("#qdsc").css("display","block");
			})
			
			$("#queding1").click(function(){
				$("#qdsc").css("display","none");
				$("#sccg").css("display","block");
			})
			
			$("#quxiao1").click(function(){
				$(".quxiao").css("display","none");
				$("#qdsc").css("display","none");
			})
			
			$("#queren1").click(function(){
				$("#scxx").submit();
				$(".quxiao").css("display","none");
				$("#sccg").css("display","none");
			})
		})
	</script>
	<style type="text/css">
		.chakan{
			width:400px;
			height:550px;
			position:absolute;
			top:0;
			left:200px;
			z-index:99;
			display:none;
			border:1px solid #dadada;
			background:#fff;
			text-align: center;
		}
		.chakan .input{
			text-align:right;
		}
		.input input {
			height:20px;
			width:200px;
			margin:10px 58px 0 0;
			text-indent:10px;
			border: 1px solid;
		}
		.qd{
	   		height: 30px;
	    	line-height: 30px;
			font-size: 12px;
			text-indent:0;
			width:80px;
		    color: #fff;
		    border: none;
		    border-radius: 2px;
		    background: #6ab0ff;
		    margin-top: 10px;
		}
		.tjcg{
			width:200px;
			height:120px;
			position:absolute;
			top:100px;
			left:300px;
			z-index:99;
			display:none;
			border:1px solid #dadada;
			background:#fff;
			text-align: center;
		}
	</style>
</head>
<body>
<div class="contentdiv">
	<div class="top">
		<i class="iconfont icon-jibenshezhi"></i>
		<span>车型管理</span>
	</div>
	<div class="center">
		<div class="centertop">
			<div>
				<input type="button" value="+添加车型" id="insert"/>
			</div>
			<div class="find">
				<input class="findtext" type="text" id="modelid" placeholder="请输入车型编号"/>
				<input type="button"  value="查 询" id="query"/>
				<a href="${cxt}/backstage/modelmanageservlet	"><input type="button"  value="查询全部"/></a>
			</div>
		</div>

		<div class="centerbutt">
			<table border="0" cellpadding="0" cellspacing="0">
				<tr>
					<th>车型编号</th>
					<th>车型名称</th>
					<th>品牌</th>
					<th>年代款</th>
					<th>座位数</th>
					<th>车门数</th>
					<th>燃料类型</th>
					<th>GPS导航</th>
					<th>座椅</th>
					<th>车图片</th>
					<th>日均租金</th>
					<th>基本保险</th>
					<th>自选折扣</th>
					<th>押金</th>
					<th>操作</th>
				</tr>
				<tbody id="table">
				<c:forEach items="${modelManage}" var="modelManage">
				<tr>
					<td>${modelManage.car_model_id}</td>
					<td>${modelManage.car_model_name}</td>
					<td>${modelManage.car_model_type}</td>
					<td>${modelManage.car_model_year}</td>
					<td>${modelManage.car_model_seating}</td>
					<td>${modelManage.car_model_door_number}</td>
					<td>${modelManage.car_model_fuel_type}</td>
					<td>${modelManage.car_model_gps}</td>
					<td>${modelManage.car_model_seat}</td>
					<td>${modelManage.car_model_image}</td>
					<td>${modelManage.car_model_rent_cash}</td>
					<td>${modelManage.car_model_insurance}</td>
					<td>${modelManage.company_discount}</td>
					<td>${modelManage.car_model_pledge}</td>
					<td>
						<input class="update" type="button" value="修 改" />
						<input class="delete" type="button" value="删 除"/>
					</td>
				</tr>
				</c:forEach>
				</tbody>
			</table>
		</div>
	</div>

	<form action="${cxt }/backstage/modelmanageservlet1" method="post" id="tjxx">
	<div class="chakan" id="tianjia">
		<br>
		<h3>添加信息</h3>
		<div class="input">
			车型编号：<input type="text" id="id1">
				<input type="hidden" name="id1"><br>
			车型名称：<input type="text" id="name1">
				<input type="hidden" name="name1"><br>
			品牌：<input type="text" id="type1">
				<input type="hidden" name="type1"><br>
			年代款：<input type="text" id="year1">
				<input type="hidden" name="year1"><br>
			座位数：<input type="text" id="seating1">
				<input type="hidden" name="seating1"><br>
			车门数：<input type="text" id="number1">
				<input type="hidden" name="number1"><br>
			燃料类型：<input type="text" id="fuel1">
				<input type="hidden" name="fuel1"><br>
			GPS导航：<input type="text" id="gps1">
				<input type="hidden" name="gps1"><br>
			座椅：<input type="text" id="seat1">
				<input type="hidden" name="seat1"><br>
			车图片：<input type="text" id="image1">
				<input type="hidden" name="image1"><br>
			日均租金：<input type="text" id="cash1">
				<input type="hidden" name="cash1"><br>
			基本保险：<input type="text" id="insurance1">
				<input type="hidden" name="insurance1"><br>
			自选折扣：<input type="text" id="discount1">
				<input type="hidden" name="discount1"><br>
			押金：<input type="text" id="pledge1">
				<input type="hidden" name="pledge1"><br>
		</div>
		<input class="qd" type="button" value="确认添加" id="queding2"/>
		<input class="qd" type="button" value="取消" id="quxiao2"/>
	</div>
	<div class="tjcg" id="tjcg">
		<br>
		<h3>添加成功！</h3><br>
		<input class="qd" type="button" value="确认" id="queren2"/>
	</div>
	</form>

	<form action="${cxt }/backstage/modelmanageservlet3" method="post" id="xgxx">
	<div class="chakan" id="chakan">
		<br>
		<h3>详细信息</h3>
		<div class="input">
			车型编号：<input type="text" id="id">
				<input type="hidden" name="id"><br>
			车型名称：<input type="text" id="name">
				<input type="hidden" name="name"><br>
			品牌：<input type="text" id="type">
				<input type="hidden" name="type"><br>
			年代款：<input type="text" id="year">
				<input type="hidden" name="year"><br>
			座位数：<input type="text" id="seating">
				<input type="hidden" name="seating"><br>
			车门数：<input type="text" id="number">
				<input type="hidden" name="number"><br>
			燃料类型：<input type="text" id="fuel">
				<input type="hidden" name="fuel"><br>
			GPS导航：<input type="text" id="gps">
				<input type="hidden" name="gps"><br>
			座椅：<input type="text" id="seat">
				<input type="hidden" name="seat"><br>
			车图片：<input type="text" id="image">
				<input type="hidden" name="image"><br>
			日均租金：<input type="text" id="cash">
				<input type="hidden" name="cash"><br>
			基本保险：<input type="text" id="insurance">
				<input type="hidden" name="insurance"><br>
			自选折扣：<input type="text" id="discount">
				<input type="hidden" name="discount"><br>
			押金：<input type="text" id="pledge">
				<input type="hidden" name="pledge"><br>
		</div>
		<input class="qd" type="button" value="确认修改" id="queding"/>
		<input class="qd" type="button" value="取消" id="quxiao"/>
	</div>
	<div class="tjcg" id="xgcg">
		<br>
		<h3>修改成功！</h3><br>
		<input class="qd" type="button" value="确认" id="queren"/>
	</div>
	</form>
	
	<form action="${cxt }/backstage/modelmanageservlet" method="post" id="scxx">
	<div class="tjcg" id="qdsc">
		<br>
		<h3>确定删除吗？</h3><br>
		<input class="qd" type="button" value="确定" id="queding1"/>
		<input class="qd" type="button" value="取消" id="quxiao1"/>
	</div>
	<div class="tjcg" id="sccg">
		<br>
		<h3>删除成功！</h3><br>
		<input class="qd" type="button" value="确认" id="queren1"/>
	</div>
	</form>
</div>
</body>
</html>